<template>
	<div>
		<el-row type="flex" class="row-bg" justify="center">
			<el-col ></el-col>
			<el-col >
				<GobangCanvas :chessData="chessData" :clickCallback="clickCallback" />
			</el-col>
			<el-col style='text-align:left;'>
				<br />
				<h3>总步数：{{chessDatas.length}}</h3>
				<h3>当前步数：{{chessDataN}}</h3>
				<h3>当前下棋：{{chessData.value == 1 ? "白棋":"黑棋"}}</h3>
				<h3>当前状态：{{chessData.label}}</h3>
			</el-col>
		</el-row>
		<el-row>
			<el-cascader placeholder='请选择Ai算法' v-model="value" :options="options" :props="{ expandTrigger: 'hover' }"
				@change="handleChange"></el-cascader>
		</el-row>
		<br />
		<el-row type="flex" v-if="!isReview" class="row-bg" justify="center">
			<el-button type="danger" :disabled='but_hq' @click='repentantChess'>悔棋</el-button>
			<el-button type="warning" :disabled='but_cxks' @click='start'>重新开始</el-button>
			<el-button type="primary" :disabled='but_ksyx' @click='start'>开始游戏</el-button>
		</el-row>
		<el-row type="flex" v-else class="row-bg" justify="center">
			<el-button type="info" :disabled='but_syb' @click='reviewPlus'>上一步</el-button>
			<el-button type="info" :disabled='but_xyb' @click='reviewMinus'>下一步</el-button>
			<el-button type="danger" @click='start'>退出复盘</el-button>
		</el-row>
	</div>
</template>

<script>
	import GobangCanvas from '@/components/GobangCanvas.vue'
	import requests from '@/utils/requests.js'

	export default {
		name: 'Gobang',
		components: {
			GobangCanvas
		},
		data() {
			return {
				chessData: {
					matrix: [],
					label: '初始化棋盘',
					value: 2,
					win: 0,
					depth: 0,
					over: false,
					notClick: true,
				},
				chessDatas: [],
				chessDataN: 0,
				clickCallback: () => {},
				value: [],
				lineNums: 15,
				but_hq: true,
				but_ksyx: true,
				but_cxks: true,
				but_syb: true,
				but_xyb: true,
				isReview: false,
				but_syb: true,
				but_xyb: true,
				options: [{
					value: 'suiji',
					label: '随机算法',
				}, {
					value: 'pingfen',
					label: '评分算法',
				}, {
					value: 'jianzhi',
					label: '剪枝算法',
					children: [{
						value: 1,
						label: '深度:1',
					}, {
						value: 2,
						label: '深度:2',
					}, {
						value: 3,
						label: '深度:3(可能卡)',
					}, {
						value: 4,
						label: '深度:4(可能卡死)',
					}],
				}],
			}
		},
		methods: {
			handleChange(v) {
				if (v[0] == 'suiji') {
					this.clickCallback = this.randomAi;
				} else if (v[0] == 'pingfen') {
					this.chessData.depth = 1;
					this.clickCallback = this.pyAiCall;
				} else if (v[0] == 'jianzhi' && v[1] > 0) {
					this.chessData.depth = v[1];
					this.clickCallback = this.pyAiCall;
				} else {
					this.but_hq = true;
					this.but_cxks = true;
					this.but_ksyx = true;
					return;
				}
				this.but_ksyx = false;
			},
			start() {
				this.isReview = false;
				this.but_cxks = false;
				this.but_ksyx = true;
				this.chessData.matrix = [];
				for (let i = 0; i < this.lineNums; i++) {
					this.chessData.matrix.push(new Array(this.lineNums).fill(0, 0, this.lineNums));
				}
				this.chessData.notClick = false;
				this.chessData.label = "开始游戏，玩家先手";
				this.chessData.value = 2;
				this.chessData.win = 0;
				this.chessData.over = false;
				this.chessDatas = [];
				this.chessDataN = 0;
			},
			victory() {
				if (this.chessData.over || this.chessData.win) {
					let text = this.chessData.win == 1 ? '白棋' : '黑棋';
					this.chessData.over = true;
					this.chessData.notClick = true;
					this.chessData.label = text + '获胜!';
					this.chessDatas.push(JSON.parse(JSON.stringify(this.chessData)));
					this.chessDataN = this.chessDatas.length;
					this.but_hq = true;
					this.$confirm(text + '获胜, 是否复盘?', '提示', {
						confirmButtonText: '复盘',
						cancelButtonText: '取消',
						type: 'success'
					}).then(() => {
						this.chessDataN = 1;
						this.review();
					}).catch(() => {
					});
					return true;
				}
				this.chessDatas.push(JSON.parse(JSON.stringify(this.chessData)));
				this.chessDataN = this.chessDatas.length;
				if (this.chessDataN >= 3 && !this.chessData.notClick) this.but_hq = false;
				else this.but_hq = true;
				return false;
			},
			repentantChess() {
				let text = this.chessData.value == 1 ? '白棋' : '黑棋';
				this.chessData = JSON.parse(JSON.stringify(this.chessDatas[this.chessDataN - 3]));
				this.chessData.label = text + "方悔棋";
				this.chessData.notClick = false;
				this.chessDatas.push(JSON.parse(JSON.stringify(this.chessData)));
			},
			review() {
				this.isReview = true;
				this.chessData = this.chessDatas[this.chessDataN - 1];
				if (this.chessDataN > 1) this.but_syb = false;
				else this.but_syb = true;
				if (this.chessDataN < this.chessDatas.length) this.but_xyb = false;
				else this.but_xyb = true;
			},
			reviewPlus() {
				this.chessDataN--;
				this.review();
			},
			reviewMinus() {
				this.chessDataN++;
				this.review();
			},
			pyAiCall() {
				if (this.victory()) return;
				this.chessData.label = 'Ai落子中...';
				requests.post('/api/gobang', this.chessData)
					.then((response) => {
						console.log(response);
						this.chessData = response.data;
						response.data.notClick = false;
						if (this.victory()) return;
					})
					.catch((error) => {
						this.$alert('后端服务异常:' + error, '服务器错误', {
							confirmButtonText: '确定',
							type: 'error'
						});
						console.log(error);
					});
			},
			randomAi() {
				if (this.victory()) return;
				let x, y
				do {
					x = this.random(0, this.lineNums - 1);
					y = this.random(0, this.lineNums - 1);
				} while (this.chessData.matrix[x][y] != 0)
				this.chessData.matrix[x][y] = this.chessData.value;
				let text = this.chessData.value == 1 ? '白棋' : '黑棋';
				this.chessData.label = `${text}落子:(${y},${x})`;
				this.chessData.value = this.chessData.value == 2 ? 1 : 2;
				this.chessData.notClick = false;
				if (this.victory()) return;
			},
			random(min, max) {
				return Math.round(Math.random() * (max - min)) + min;
			}
		},
		mounted() {
			this.clickCallback = this.pyAiCall;
		},
	}
</script>
<style scoped>

</style>
